// 终端

<template>
  <div class="terminal" :style="{ height: height + 'px' }" draggable="false">
    <div class="terminal-top">
      <span>终端</span>
      <!-- 新建终端 -->
      <el-icon title="新建终端" style="margin-left: auto"><Plus /></el-icon>
      <!-- cmd -->
      <i title="切换终端类型" class="iconfont icon-cmd"></i>
      <i class="iconfont icon-PowerShell"></i>
      <el-icon title="删除终端"><Delete /></el-icon>
      <el-icon title="隐藏面板"><CloseBold /></el-icon>
    </div>
    <div class="terminal-list">
      <!-- 目前暂定一个终端 -->
      <vueWebTerminal name="terminal" />
    </div>

    <!-- 实现拖拽调整大小 -->
    <div class="unicode-drag-bar" @mousedown="dragBarHandle"></div>
  </div>
</template>

<script setup lang="ts">
import { Plus, Delete, CloseBold } from "@element-plus/icons-vue";
import vueWebTerminal from "./components/vue-web-terminal.vue";
import { mousedownHandler } from "../../utils/unicode-drag-bar";
import { ref } from "vue";

const height = ref(180);
function dragBarHandle(e: MouseEvent) {
  const temp = height.value;
  mousedownHandler(e, "tb", (dx: number) => {
    height.value = temp - dx;
    // 有一个最大值和最小值
    height.value = Math.max(height.value, 100);
    height.value = Math.min(height.value, 400);
  });
}
</script>

<style lang="css" scoped>
.terminal {
  position: relative;
  color: var(--t-main-font-color);
  padding: 10px;
  border-top: solid var(--t-main-border-color) 1px;
}
.terminal .unicode-drag-bar {
  position: absolute;
  top: 0;
  height: var(--base);
  width: 100%;
  transform: translate(-10px, -50%);
  cursor: ns-resize;
}
.terminal-top {
  user-select: none;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terminal-top > span {
  font-size: 12px;
  padding: 4px;
  border-bottom: solid 2px #409eff;
}
.icon-PowerShell {
  font-size: 44px;
}
.terminal-top > * {
  transition: all 0.3s;
  cursor: pointer;
  margin-left: 10px;
}
.terminal-top > *:hover {
  color: #409eff;
}
.terminal-list {
  height: calc(100% - 24px);
}
</style>
